<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
    <style>
        .input-group {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>
<script>
    // 用户名
    // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头
    // (1) 一步到位
    // (2)  拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成
    var flag = 0
    var user = document.getElementsByClassName('user')[0]
    user.onblur = function () {
        var val = user.value
        var reg = /^\D{1}\w{5,12}$/
        if (reg.test(val)) {
            flag++
            this.nextElementSibling.innerHTML = ''
        } else {
            this.nextElementSibling.innerHTML = '❌'
        }
    }
    // 密码：
    //  由数字 字母 下划线 $ 组成, 6-12位，密码强度
    var pwd = document.getElementsByClassName('pwd')[0]
    pwd.onblur = function () {
        var val = this.value
        var reg = /^\w{6,12}$/
        if (reg.test(val)) {
            flag++
            this.nextElementSibling.innerHTML = ''
        } else {
            this.nextElementSibling.innerHTML = '❌'
        }
    }
    // 手机号
    // 纯数字 11位   以开  第二位3-9
    var phone = document.getElementsByClassName('phone')[0]
    phone.onblur = function () {
        var val = this.value
        var reg = /^1[3-9]\d{9}$/
        if (reg.test(val)) {
            flag++
            this.nextElementSibling.innerHTML = ''
        } else {
            this.nextElementSibling.innerHTML = '❌'
        }
    }
    // 邮箱
    var email = document.getElementsByClassName('email')[0]
    email.onblur = function () {
        var val = this.value
        var reg = /^\w{3,8}@(qq||email||gmail||icloud).com$/
        if (reg.test(val)) {
            flag++
            this.nextElementSibling.innerHTML = ''
        } else {
            this.nextElementSibling.innerHTML = '❌'
        }
    }

    // 用户名 密码 手机号 邮箱 格式全都正确 => 跳转百度
    var submit = document.getElementsByClassName('submit')[0]
    submit.onclick = function () {
        if (flag == 4) {
            location.href = 'http://www.baidu.com'
        }
    }
    // 2.参数解析  => 对url?之后的数据进行拆分解析  => 对象 {user:"xxx",pwd:"xxx",phone:"xxx",email:"xxx"}  => 提示 1. 多项数据之间用什么分隔?  2. 单条数据之间用什么分隔


    var url = "https://www.baidu.com/index.html?user=a123123&pwd=123123&phone=17386151421&email=123132@qq.com"

    // var mess = url.split('?')[1].split('&')
    // var data = {}
    // for (var i = 0; i < mess.length; i++) {
    //     var item = mess[i];
    //     var key = item.split("=")[0]
    //     var val = item.split("=")[1]
    //     data[key] = val
    // }
    // console.log(data)
    var mess = url.split('?')[1]
    var reg = /(\w+)=(\w+)/g

    var arr = null
    var data = new Object()
    while (arr = reg.exec(mess)) {
        console.log(arr)
        var key = arr[1]
        var val = arr[2]
        data[key] = val
    }
    console.log(data)


</script>

</html>